import React  from 'react';
import PropTypes from 'proptypes';
import DatabaseListItem from './database-list-item.jsx';
const DatabaseList=React.forwardRef((props,ref_filter)=>{ 
  // static propTypes = {
  //   client: PropTypes.string.isRequired,
  //   databases: PropTypes.array.isRequired,
  //   currentDB: PropTypes.string,
  //   isFetching: PropTypes.bool.isRequired,
  //   tablesByDatabase: PropTypes.object.isRequired,
  //   columnsByTable: PropTypes.object.isRequired,
  //   triggersByTable: PropTypes.object.isRequired,
  //   indexesByTable: PropTypes.object.isRequired,
  //   viewsByDatabase: PropTypes.object.isRequired,
  //   functionsByDatabase: PropTypes.object.isRequired,
  //   proceduresByDatabase: PropTypes.object.isRequired,
  //   onSelectDatabase: PropTypes.func.isRequired,
  //   onExecuteDefaultQuery: PropTypes.func.isRequired,
  //   onExecuteEditTable: PropTypes.func.isRequired,
  //   onSelectTable: PropTypes.func.isRequired,
  //   onGetSQLScript: PropTypes.func.isRequired,
  //   onRefreshDatabase: PropTypes.func.isRequired,
  //   onShowDiagramModal: PropTypes.func.isRequired,
  // };
  const [state,setState]=React.useState({
  });
  // constructor(props, context) {
  //   super(props, context);
  //   state = {};
  // }

  const focus=(database) =>{
    //refs[database].focus();
  }

    const {
      client,
      databases,
      isFetching,
      tablesByDatabase,
      columnsByTable,
      triggersByTable,
      indexesByTable,
      viewsByDatabase,
      functionsByDatabase,
      proceduresByDatabase,
      onExecuteDefaultQuery,
      onExecuteEditTable,
      onSelectTable,
      onSelectDatabase,
      onGetSQLScript,
      onRefreshDatabase,
      onShowDiagramModal,
      currentDB,
    } = props;

    if (isFetching) {
      return <div className="ui grey item">Loading...</div>;
    }
    //console.log(databases.length);

    if (!databases.length) {
      return <div className="ui grey item">No results found</div>;
    }

    return (
      <div className="item" style={{ padding: 0 }}>
        {databases.map(database => (
          <DatabaseListItem
            key={database.name}
            currentDB={currentDB}
            client={client}
            database={database}
            tables={tablesByDatabase[database.name]}
            columnsByTable={columnsByTable[database.name]}
            triggersByTable={triggersByTable[database.name]}
            indexesByTable={indexesByTable[database.name]}
            views={viewsByDatabase[database.name]}
            functions={functionsByDatabase[database.name]}
            procedures={proceduresByDatabase[database.name]}
            onExecuteDefaultQuery={onExecuteDefaultQuery}
            onExecuteEditTable={onExecuteEditTable}
            onSelectTable={onSelectTable}
            onSelectDatabase={onSelectDatabase}
            onGetSQLScript={onGetSQLScript}
            onRefreshDatabase={onRefreshDatabase}
            onShowDiagramModal={onShowDiagramModal}
          />
        ))}
      </div>
    );
});
export default DatabaseList;
